<template>
  <div class="xindian">
    <!--<div class="headerDiv"></div>-->

    <div class="aui-bar aui-bar-nav aui-barPailuan">
      <!--<a class="aui-pull-left aui-padded-l-15 icon iconfont icon-fanhuijiantou1 " style="color:#0075f0 !important;" @click="goBack()">-->
      <!--<div style="color: black;margin-left: 1rem">排卵</div>-->
      <!--</a>-->
      <a class="aui-pull-left">
        <img style="width: 2.5rem;;" src="../../../../static/img/back-b.png" alt=""  @click="goBack()">
        <div >
        <span style="margin-top:-0.85rem;left:4.5rem;position: absolute;color: black; font-size: 18px;	font-family: 'Helvetica Neue', Helvetica, sans-serif;">
              可视心率
            </span>
        </div>
      </a>
    </div>
    <section class="sectionMagin">
      <div style="margin:2rem 1rem">
        <img src="../img/heart1.png" alt="">
      </div>
      <div class="aui-flex-col aui-flex-item-12 aui-text-center listTit">
        <div style="width:90%;margin:0 5%">
          <div class="aui-flex-item-4">检验日期</div>
          <div class="aui-flex-item-4">检验结果</div>
          <div class="aui-flex-item-4">结果描述</div>
        </div>
      </div>
      <div class="aui-flex-col aui-flex-item-12 aui-text-center list pailuan-list" v-for="Hearrate in HearrateArr.data">
        <div class="aui-flex-item-4 aui-padded-t-5 aui-font-size-14" @click="goResutl(Hearrate.obj_data,Hearrate.heart_rate,Hearrate.chartUrl)">
          <div>{{Hearrate.group_data}}</div>
          <div>{{Hearrate.create_time}}</div>
        </div>
        <div class="aui-flex-item-4" @click="goResutl(Hearrate.obj_data,Hearrate.heart_rate,Hearrate.chartUrl)" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{Hearrate.heart_rate}}</div>
        <div class="aui-flex-item-4" @click="goResutl(Hearrate.obj_data,Hearrate.heart_rate,Hearrate.chartUrl)" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{Hearrate.chartUrl}}</div>
      </div>
      <div style="clear: both"></div>

      <div class="bHint bottomBtn">
        <div class="aui-font-size-12 aui-text-center aui-margin-b-10 textColor">
          注：此纪录仅保存最近三次的检测结果。<br />（心率检测接触不良将不会保存该次心率检测数据）<br />
          准备就绪了吗？小普将开始为您进行心电检测
        </div>
        <div @click="goPath('/xindianfirst')" class="aui-btn SubBtnxindian">开始检测</div>
      </div>

    </section>
    <addtoAlert v-if="showAddtoAlert"></addtoAlert>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'
  import addtoAlert from '../../common/addtoAlert'

  export default {
    name: 'XinDian',
    data () {
      return {
      }
    },
    computed: {
      ...mapState([
        'showAddtoAlert','HearrateArr','TempDArray','XinDArray'
      ])
    },
    components: {
      Loading,
      addtoAlert
    },
    methods: {
      ...mapMutations([ 'SetIsReDo','setTempDArrayReDO'
      ]),
      goBack(){
        this.$router.push('/index')
      },
      goPath(pth){
        this.$router.push({path:pth})
      },
      goResutl (cans,rate,chartUrl){
        this.setTempDArrayReDO({cans:cans,rate:rate,chartUrl:chartUrl})

        console.log(this.TempDArray)
        console.log(this.XinDArray)
        var now = new Date()
        this.$router.push('/xindianredo?r='+now.getTime())
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .headerDiv{
    height: 2rem;
    width: 100%;
    /*background-color: #288af0;*/
  }
  .bodyBg{
    background: #ffffff;
  }
  .aui-barPailuan{
    border-bottom: 2px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px;
    font-weight: bold;
  }

  .elementImg{width:50%;margin:auto}
  .listTit{
    background: #f4f4f4;
    height:2rem;
    line-height: 2rem;
  }
  .list{
    width:90%;
    margin:0 5%;
    /* height:2.5rem;*/
    border-bottom: 1px solid #ccc;
  }
  .bHint{
    margin-top: 10rem;
    width:100%;
    /*position: absolute;*/
    /*bottom:1rem;*/
  }
  .SubBtnxindian{
    /*width:80%;*/
    /*height: 2.5rem;*/
    /*line-height: 2.5rem;*/
    /*margin:0 10%;*/
    /*color:#0075f0;*/
    /*font-size:1.3rem;*/
    /*border:1px solid #ccc;*/
    /*border-radius: 1.125rem;*/
    /*background: #f7f7f7;*/
    width: 90%;
    height: 3rem!important;
    line-height: 3rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1.2rem!important;
    border: 1px solid #eee;
    border-radius: 1.5rem!important;
    background: #f7f7f7!important;
  }
  .textColor{
    color:#ccc;
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
  .aui-bar{
    padding-top: 25px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
  }
  .aui-bar a{
    padding: 0 !important;
    /*padding-bottom: 1px !important;*/
    /*padding-left: 30px !important;*/
    /*padding-right: 30px !important;*/

  }
</style>

